/*
 * @Description: 
 * @Author: liyuhao
 * @Date: 2021-07-26 17:34:39
 * @LastEditors: liyuhao
 * @LastEditTime: 2021-08-19 11:05:39
 */
import React from 'react'
import { Tag, Spin, Row, Col, ColProps } from 'antd'
import styles from './index.module.less'

interface TagItem {
  label: string
  value: React.Key
  parentValue?: React.Key
}

export interface TagSelectProps {
  style?: React.CSSProperties
  value?: React.Key[]
  onChange?: (value?: React.Key[]) => void
  loading?: boolean
  tags?: TagItem[]
  mutil?: boolean
  classifications?: TagItem[]
  classificationLableCol?: ColProps & { style?: React.CSSProperties}
  classificationWrapperCol?: ColProps & { style?: React.CSSProperties}
}

const { CheckableTag } = Tag

const isChecked = (values?: React.Key[], value?: React.Key) => !!(values && value && values.includes(value))

const TagSelect: React.FC<TagSelectProps> = props => {
  const { style, value, onChange, loading, tags, mutil, classifications, classificationLableCol, classificationWrapperCol } = props

  const handleChange = (_checked: boolean, _value: React.Key) => {
    let res: React.Key[] = []
    if (mutil) {
      const otherIds = value ? value.filter(v => v !== _value) : []
      res = _checked ? [...otherIds, _value] : otherIds
    } else {
      res = _checked ? [_value] : []
    }
    onChange && onChange(res)
  }

  if (classifications && classifications.length > 0) {
    return (
      <div style={style}>
        <Spin spinning={loading}>
          {
            classifications.map((classification: TagItem) => (
              <Row
                key={classification.value}
                gutter={24}
                className="mb-3"
              >
                <Col
                  span={4}
                  style={{
                    display: 'flex',
                    flexDirection: 'row-reverse',
                    alignItems: 'center'
                  }}
                  {...classificationLableCol}
                >{classification.label}</Col>
                <Col
                  span={20}
                  {...classificationWrapperCol}
                >
                  {
                    (tags || []).filter(v => v.parentValue === classification.value).map((v: TagItem) => (
                      <CheckableTag
                        key={v.value}
                        checked={isChecked(value, v.value)}
                        onChange={(_checked: boolean) => handleChange(_checked, v.value)}
                        className={`${styles['check-tag']} ${isChecked(value, v.value) ? '' : styles['check-tag-checked']} mb-2`}
                      >{v.label}</CheckableTag>
                    ))
                  }
                </Col>
              </Row>
            ))
          }
        </Spin>
      </div>
    )
  } else {
    return (
      <div style={style}>
        <Spin spinning={loading}>
          {
            (tags || []).map((v: TagItem) => (
              <CheckableTag
                key={v.value}
                checked={isChecked(value, v.value)}
                onChange={(_checked: boolean) => handleChange(_checked, v.value)}
                className={`${styles['check-tag']} ${isChecked(value, v.value) ? '' : styles['check-tag-checked']} mb-2`}
              >{v.label}</CheckableTag>
            ))
          }
        </Spin>
      </div>
    )
  }
}

export default TagSelect